<template>
  <div class="stream-server-list">
    <div class="panel-header">
      <h3 class="panel-title">流媒体管理</h3>
      <div class="panel-actions">
        <el-button size="small" type="primary" @click="$emit('add-server')">
          <el-icon><Plus /></el-icon>
        </el-button>
        <el-button 
          size="small" 
          @click="$emit('edit-server')" 
          :disabled="!hasSelectedServer"
        >
          <el-icon><Edit /></el-icon>
        </el-button>
        <el-button 
          size="small" 
          type="danger" 
          @click="$emit('delete-server')" 
          :disabled="!hasSelectedServer"
        >
          <el-icon><Minus /></el-icon>
        </el-button>
      </div>
    </div>
    <div class="server-list">
      <div 
        class="server-item" 
        :class="{ active: selectedServer?.id === 'all' }" 
        @click="$emit('select-server', { id: 'all' })"
      >
        所有流媒体
      </div>
      <div 
        v-for="server in streamServers" 
        :key="server.id"
        class="server-item" 
        :class="{ active: selectedServer?.id === server.id }"
        @click="$emit('select-server', server)"
      >
        <span class="server-name">{{ server.name || server.ip || `服务器${server.id}` }}</span>
        <span class="server-status" :class="{ online: server.online, offline: !server.online }">
          {{ server.online ? '在线' : '离线' }}
        </span>
      </div>
      <div v-if="loading" class="loading-state">
        加载中...
      </div>
      <div v-if="!loading && streamServers.length === 0" class="empty-state">
        暂无流媒体服务器
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElButton, ElIcon } from 'element-plus'
import { Plus, Edit, Minus } from '@element-plus/icons-vue'
import type { StreamServer } from '@/types'

// 定义类型
type ServerSelection = StreamServer | { id: 'all' }

// Props
interface Props {
  streamServers: StreamServer[]
  selectedServer: ServerSelection | null
  loading: boolean
  hasSelectedServer: boolean
}

defineProps<Props>()

// Emits
defineEmits<{
  'add-server': []
  'edit-server': []
  'delete-server': []
  'select-server': [server: ServerSelection]
}>()
</script>

<style scoped>
.stream-server-list {
  background: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.panel-header {
  padding: 16px;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f5f7fa;
}

.panel-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.panel-actions {
  display: flex;
  gap: 8px;
}

.server-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.server-item {
  padding: 12px 16px;
  cursor: pointer;
  border-radius: 4px;
  margin-bottom: 4px;
  transition: all 0.2s;
  color: #606266;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.server-item:hover {
  background: #f0f9ff;
  color: #409eff;
}

.server-item.active {
  background: #409eff;
  color: #fff;
}

.server-name {
  flex: 1;
}

.server-status {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 500;
}

.server-status.online {
  background: #f0f9ff;
  color: #67c23a;
}

.server-status.offline {
  background: #fef0f0;
  color: #f56c6c;
}

.server-item.active .server-status.online {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.server-item.active .server-status.offline {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.loading-state,
.empty-state {
  text-align: center;
  color: #909399;
  padding: 40px 20px;
  font-size: 14px;
}

/* 滚动条样式 */
.server-list::-webkit-scrollbar {
  width: 6px;
}

.server-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.server-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.server-list::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>
